<template class="firstpage">
  <div>
    <div class="boxMargin">
      <el-row class="header" :gutter="20">
        <el-col :span="8">
          <span>商品名称：</span><span>{{ form.goodsName }}</span>
        </el-col>
        <el-col :span="4">
          <span>HostItem：</span><span>{{ form.skuCode }}</span>
        </el-col>
        <el-col :span="4">
          <span>Hostupc：</span><span>{{ form.upCode }}</span>
        </el-col>
        <el-col :span="8">
          <span>商品类别：</span><span>{{ form.categoryNames }}</span>
        </el-col>
      </el-row>
    </div>
    <div class="boxMargin">
      <el-tabs v-model="customData.activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <BASICPLUGINS v-if="customData.basic" ref="basic" @func="getMsgFormSon" />
        </el-tab-pane>
        <el-tab-pane label="商品描述" name="second">
          <DESCPLUGINS v-if="customData.desc" ref="desc" />
        </el-tab-pane>
        <el-tab-pane label="商品图片" name="third">
          <IMAGEPLUGINS v-if="customData.picture" ref="picture" />
        </el-tab-pane>
        <el-tab-pane label="分类属性" name="fourth">
          <ATTRPLUGINS v-if="customData.categoryAttr" ref="categoryAttr" />
        </el-tab-pane>
        <el-tab-pane label="商品视频" name="fifth">
          <VIDEOPLUGINS v-if="customData.videoModel" ref="videoModel" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="boxMargin" />
  </div>
</template>
<script>
import $ from 'jquery'
import _validate from '../../../../../framework/commonJs/wptx_validate'
import _tools from '../../../../../framework/commonJs/wptx_tools'
import _common from '../../../../../framework/commonJs/wptx_common'
import BASICPLUGINS from './item_update_basic_plugins.vue'
import IMAGEPLUGINS from './item_update_image_plugins.vue'
import DESCPLUGINS from './item_update_desc_plugins.vue'
import VIDEOPLUGINS from './item_update_video_plugins.vue'
import ATTRPLUGINS from './item_update_attr_plugins.vue'
import _api from '@/framework/API/generalItem'
const _FUNCTION_NAME = ''
export default {
  components: {
    BASICPLUGINS: BASICPLUGINS,
    IMAGEPLUGINS: IMAGEPLUGINS,
    DESCPLUGINS: DESCPLUGINS,
    VIDEOPLUGINS: VIDEOPLUGINS,
    ATTRPLUGINS: ATTRPLUGINS
  },
  filters: {},
  data() {
    return {
      tableData: [],
      searchData: {
      },
      searchDataBuffer: {
      },
      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },
      dialogData: {},
      historyData: {},
      infoData: {},
      customData: {
        activeName: 'first',
        basic: true,
        picture: false,
        desc: false,
        videoModel: false,
        categoryAttr: false,
        detailMasterList: {}
      },
      form: {},
      rules: {}
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.onInit()
  },
  beforeDestroy() { },
  methods: {
    onInit(data) {
      const self = this
      self.customData.itemId = self.$route.query.itemId
      const params = {
        itemId: self.$route.query.itemId,
        itemVersionId: self.$route.query.itemVersionId
      }
    },
    onSearch(data) {
      const self = this
    },
    onChangePage(data) {
      const self = this
    },
    onReset(data) {
      const self = this
    },
    onAdd(data) { },
    onDelete(data) {
      const self = this
    },
    onInfo(data) {
      const self = this
    },
    onUpdate(formName) {
      const self = this
    },
    onBathDelete() {
      const self = this
    },
    onBathUpdate() { },
    onDisable(data) {
      const self = this
    },
    onEnable(data) {
      const self = this
    },
    onUpload(data) { },
    onBathUpload() { },
    onExport(data) { },
    onDownload(data) { },
    onHistory(data) { },
    callBack_infoDetailTop(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        self.form = data.data
      }
    },
    getMsgFormSon(data) {
      const self = this
      self.form = _tools.cloneObj(data)
      if (!_validate.checkEmpty(self.form.categoryNames)) {
        self.form.categoryNames = self.form.categoryNames.join(' > ').toString()
      }
    },
    handleClick(tab) {
      const self = this
      if (tab.name == 'first') {
        self.customData.basic = true
        self.customData.picture = false
        self.customData.desc = false
        self.customData.videoModel = false
        self.customData.categoryAttr = false
      } else if (tab.name == 'second') {
        self.customData.basic = false
        self.customData.picture = false
        self.customData.desc = true
        self.customData.videoModel = false
        self.customData.categoryAttr = false
      } else if (tab.name == 'third') {
        self.customData.basic = false
        self.customData.picture = true
        self.customData.desc = false
        self.customData.videoModel = false
        self.customData.categoryAttr = false
      } else if (tab.name == 'fourth') {
        self.customData.basic = false
        self.customData.picture = false
        self.customData.desc = false
        self.customData.videoModel = false
        self.customData.categoryAttr = true
      } else if (tab.name == 'fifth') {
        self.customData.basic = false
        self.customData.picture = false
        self.customData.desc = false
        self.customData.videoModel = true
        self.customData.categoryAttr = false
      }
    }
  }
}
</script>
<style scoped>
.header{
    line-height: 45px;
    font-size: 15px;
}
.boxMargin{
    word-wrap: break-word;
    word-break: normal;
}
</style>
